<script lang="ts" setup>
import { reactive, defineAsyncComponent, onMounted, ref } from 'vue'
import PhoneForm from '@/components/form/PhoneForm.vue'
import { queryCmRefundApply } from '@/api/expense'
import { useTable } from '@/hooks/useTable'
import { getToken } from '@/utils/cache/cookies'
import {
  queryCmRefundApplyTableCol,
  queryCmRefundApplyRequestData
} from '@/api/expense/types/expense'

defineOptions({
  name: 'RentRecord'
})
const CustomerRefundTable = defineAsyncComponent(
  () => import('@/components/table/CustomerRefundTable.vue')
)
const form = reactive<queryCmRefundApplyRequestData>({
  phone: '',
  status: 'all'
})
const { data, loading, pagination, load, handleCurrentChange, handleSizeChange, setCurrentPage } =
  useTable<queryCmRefundApplyTableCol>(queryCmRefundApply, getToken() ?? '', () => form)

const handleFormSearch = () => {
  setCurrentPage(1)

  load()
}
const handleTabChange = () => {
  load()
}

/** 退款申请 */
const CustomerRefundApplicationDialog = defineAsyncComponent(
  () => import('@/components/dialog/CustomerRefundApplication.vue')
)
const CustomerRefundApplicationDialogRef = ref<InstanceType<
  typeof CustomerRefundApplicationDialog
> | null>(null)

const openRefundDialog = () => {
  CustomerRefundApplicationDialogRef.value?.open()
}

onMounted(() => {
  load()
})
</script>

<template>
  <div class="xy-container">
    <div mb-20>
      <el-button type="primary" @click="openRefundDialog()">提交退款申请</el-button>
    </div>
    <phone-form v-model="form" @search="handleFormSearch" />
    <el-tabs v-model="form.status" @tab-change="handleTabChange" type="border-card">
      <el-tab-pane label="全部" name="all">
        <customer-refund-table :data="data" :loading="loading" :active-name="form.status" />
      </el-tab-pane>
      <el-tab-pane label="审核中" name="underreview">
        <customer-refund-table :data="data" :loading="loading" :active-name="form.status" />
      </el-tab-pane>
      <el-tab-pane label="退款中" name="refund">
        <customer-refund-table :data="data" :loading="loading" :active-name="form.status" />
      </el-tab-pane>
      <el-tab-pane label="已退款" name="refunded">
        <customer-refund-table :data="data" :loading="loading" :active-name="form.status" />
      </el-tab-pane>
      <el-tab-pane label="被驳回" name="overrule">
        <customer-refund-table :data="data" :loading="loading" :active-name="form.status" />
      </el-tab-pane>
      <el-tab-pane label="已撤回" name="withdraw">
        <customer-refund-table :data="data" :loading="loading" :active-name="form.status" />
      </el-tab-pane>
    </el-tabs>
    <div flex justify-end mt-20>
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        v-model:current-page="pagination.pageNum"
        v-model:page-size="pagination.pageSize"
        background
        :total="pagination.total"
        layout="total,prev,pager,next,jumper,sizes"
      />
    </div>
    <customer-refund-application-dialog ref="CustomerRefundApplicationDialogRef" />
  </div>
</template>

<style scoped></style>
